/*!
 * Copyright 2014-2024  JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
 */
@import '../_tokens/index';

.checkbox {
  position: relative;

  display: inline-block;

  cursor: pointer;

  &--input {
    position: absolute;
    appearance: none;

    visibility: hidden;
  }

  &--icon {
    position: absolute;

    width: var(--size-m1);
    height: var(--size-m1);

    margin-left: calc(-1 * var(--size-m2));

    background-image: url('../_assets/checkbox-off.svg');
  }

  &--input:checked + &--icon {
    background-image: url('../_assets/checkbox-on.svg');
  }

  &--input:disabled + &--icon {
    opacity: 0.2;
  }

  &--input:focus-visible {
    outline: var(--focus-outline);
  }
}
